<link rel="stylesheet" href="./css/form.css">
<script src="./formStatic/table/selectOption.js"></script>
<div style="position: relative;height: 100%;">
    <div class="ccpui-trees">
        <p class="isShowTree colorSwitch">
            <span style="float: left;color: white">&nbsp;&nbsp;表字段</span>
            <i layadmin-event="treeFlexible" class="layui-icon layui-icon-prev"></i>
        </p>
        <div style="margin-top: 6px;">
            <a class="layui-btn layui-btn-xs layui-btn-normal" id="refresh">
                <i class="layui-icon layui-icon-refresh"></i>
                <span>刷新</span>
            </a>
            <ul id="tableField" class="ztree ccpui-listZtree"></ul>
        </div>
    </div>
    <div class="ccpui-coreContent">
        <a class="layui-btn layui-btn-sm" id="add" style="margin-left:12px;">
            <i class="layui-icon"></i>
            <span>添加</span>
        </a>
        <div class="layui-btn-container" style="position: absolute;bottom: 0;left: 37%;">
            <a class="layui-btn" id="save">
                <i class="layui-icon"></i>
                <span>保存</span>
            </a>
            <a class="layui-btn layui-btn-danger" id="return">
                <i class="layui-icon"></i>
                <span>取消</span>
            </a>
        </div>
        <div class="layui-row" style="margin-top: 10px;">
            <form class="layui-form" action="">
                <div class="layui-form-item isDisplay" style="margin-bottom:0;">
                    <label class="layui-form-label">未分组字段是否显示: </label>
                    <div class="layui-input-inline">
                        <input type="checkbox" name="isShow" lay-skin="primary" lay-filter="isShow" checked>
                        <select name="showPosition" id="showPosition">
                            <option value="1">在分组后显示</option>
                            <option value="2">在分组前显示</option>
                        </select>
                    </div>
                </div>
            </form>
        </div>
        <form id="formTeam"></form>
    </div>
</div>
<script>

    var tableId = '${formTable.tableId}';
    var setter;
    layui.use(['form', 'jquery', 'table', 'tree', 'setter'], function () {
        var table = layui.table;
        var layer = layui.layer;
        var $ = layui.$;
        var form = layui.form;
        setter = layui.setter;
        //关闭弹窗
        var index = parent.layer.getFrameIndex(window.name);
        $('#return').click(function () {
            parent.layer.close(index);
        });
        form.render();
        //异步加载表属性列表
        loadTab();

        function loadTab() {
            $.ajax({
                url: serverPath.formPath + setter.formLinkPath + 'table/getFieldsByTableId',
                type: "post",
                dataType: 'json',
                data: {"tableId": tableId},
                success: function (result) {
                    if (result.length > 0) {
                        var text = "";
                        for (var i = 0; i < result.length; i++) {
                            text += "<a ondblclick='toTeam(this)'>" + result[i]["fieldDesc"] + "</a>"
                                + "<input type='hidden' value='" + result[i]["fieldName"] + "'/>" + "<br>";
                        }
                        $("#tableField").html(text);
                    }
                },
            });
        }

        //未分组字段是否显示
        form.on('checkbox(isShow)', function (data) {
            if (data.elem.checked == true) {
                $(".isDisplay .layui-form-select").show();
            } else {
                $(".isDisplay .layui-form-select").hide();
            }
        });
        //将分组字段渲染到分组设置中
        var team = '${formTable.team}';
        if (team != null && team != "") {
            team = JSON.parse(team);
        }
        //1.渲染checkbox
        $("input[name='isShow']").attr('checked', team['isShow']);
        //2.渲染select下拉
        var showPosition = document.getElementById("showPosition");
        for (var i = 0; i < showPosition.options.length; i++) {
            if (showPosition.options[i].value == team['showPosition']) {
                showPosition.options[i].selected = true;
                break;
            }
        }
        //3.渲染分组名称及字段
        var teamArray = team['team'];
        if (teamArray == null || teamArray == "") {
            teamArray = [{"teamName": "", "teamField": ""}];
        }
        var fieldGroup = "";
        for (var i = 0; i < teamArray.length; i++) {

            fieldGroup = fieldGroup + '    <fieldset class="layui-elem-field">\n' +
                '        <legend>分组设置 <a class="layui-icon layui-icon-close"  style="color:red;" onclick="delTeam(this)"></a></legend> ' +
                '        <div class="layui-field-box">\n' +
                '            <div class="layui-row" style="margin-top: 15px;position: relative;">\n' +
                '                <table>\n' +
                '                    <tr style="height: 46px;">\n' +
                '                        <td>\n' +
                '                            <label class="layui-form-label" style="width: auto">分组名称: </label>\n' +
                '                        </td>\n' +
                '                        <td>\n' +
                '                            <input type="text" class="layui-input" name="teamName" value="' + teamArray[i]['teamName'] + '"/>\n' +
                '                        </td>\n' +
                '                    </tr>\n' +
                '                    <tr style="margin-top:10px">\n' +
                '                        <td>\n' +
                '                            <label class="layui-form-label" style="width: auto">分组字段: </label>\n' +
                '                        </td>\n' +
                '                        <td>\n' +
                '                            <div style="float: left;" name="divStyle" onclick="changeStyle(this)">\n' +
                '                                <select size="10" style="width:190px;height:180px;display:inline-block;" name="teamField"  ondblclick="removeOption(this)">\n';

            for (var j = 0; j < teamArray[i]['teamField'].length; j++) {
                fieldGroup = fieldGroup + '<option value="' + teamArray[i]['teamField'][j]['fieldName'] + '">' + teamArray[i]['teamField'][j]['fieldDesc'] + '</option>\n'
            }

            fieldGroup = fieldGroup + '</select>\n' +
                '                            </div>\n' +
                '                            <div style="position: absolute;left:309px;top:34px;">\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="置顶" class="moveFieldTop layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="上移" class="moveFieldUp layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="下移" class="moveFieldDown layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="置底" class="moveFieldBottom layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                            </div>\n' +
                '                        </td>\n' +
                '                    </tr>\n' +
                '                </table>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </fieldset>';
        }
        $("#formTeam").html(fieldGroup);

        //添加按钮
        $('#add').click(function () {
            $("#formTeam").append('    <fieldset class="layui-elem-field">\n' +
                '        <legend>分组设置 <a class="layui-icon layui-icon-close" style="color:red;" onclick="delTeam(this)"></a></legend> ' +
                '        <div class="layui-field-box">\n' +
                '            <div class="layui-row" style="margin-top: 15px;position: relative">\n' +
                '                <table>\n' +
                '                    <tr style="height: 46px;">\n' +
                '                        <td>\n' +
                '                            <label class="layui-form-label" style="width: auto">分组名称: </label>\n' +
                '                        </td>\n' +
                '                        <td>\n' +
                '                            <input type="text" class="layui-input" name="teamName" value=""/>\n' +
                '                        </td>\n' +
                '                    </tr>\n' +
                '                    <tr>\n' +
                '                        <td>\n' +
                '                            <label class="layui-form-label" style="width: auto">分组字段: </label>\n' +
                '                        </td>\n' +
                '                        <td>\n' +
                '                            <div style="float: left;" name="divStyle" onclick="changeStyle(this)">\n' +
                '                                <select size="10" style="width:190px;height:180px;display:inline-block;" name="teamField"  ondblclick="removeOption(this)">\n' +
                '                                </select>\n' +
                '                            </div>\n' +
                '                            <div style="position: absolute;left:309px;top:34px;">\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="置顶" class="moveFieldTop layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="上移" class="moveFieldUp layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="下移" class="moveFieldDown layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                                <br>\n' +
                '                                <p>\n' +
                '                                    <input type="button" value="置底" class="moveFieldBottom layui-btn layui-btn-sm">\n' +
                '                                </p>\n' +
                '                            </div>\n' +
                '                        </td>\n' +
                '                    </tr>\n' +
                '                </table>\n' +
                '            </div>\n' +
                '        </div>\n' +
                '    </fieldset>');
        });

        //刷新按钮
        $('#refresh').click(function () {
            loadTab();
        });
    });
    //保存
    $('#save').click(function () {
        for (var i = 0; i < $("input[name ='teamName']").length; i++) {
            var teamName = $($("input[name='teamName']")[i]).val();
            if (teamName == "") {
                layer.alert('请填写分组名称!');
                return false;
            }
        }

        for (var i = 0; i < $("select[name ='teamField']").length; i++) {
            if ($($("select[name ='teamField']")[i]).find("option").length == 0) {
                layer.alert('请选择分组的字段！');
                return false;
            }
        }
        var team = '';
        //获取是否选中
        var isShow = $("input[name='isShow']").is(':checked');
        team += '{"isShow":' + isShow;
        //获取下拉
        var showPosition = $('#showPosition option:selected').val();
        if (showPosition != '') {
            team += ',"showPosition":' + '"' + showPosition + '"';
        }
        //获取分组名称及分组字段
        for (var i = 0; i < $("fieldset").length; i++) {
            if (i == 0) {
                team += ',"team":[';
            } else {
                team += ',';
            }
            var teamName = $($("fieldset")[i]).find("input[name='teamName']").val();
            team += '{"teamName":' + '"' + teamName + '"' + ',"teamField":[';
            var optionTeam = $($("fieldset")[i]).find("select option");
            for (var j = 0; j < optionTeam.length; j++) {
                var fieldName = $(optionTeam[j]).val();
                var fieldDesc = $(optionTeam[j]).text();
                if (j == 0) {
                    team += '{"fieldName":' + '"' + fieldName + '"' + ',"fieldDesc":' + '"' + fieldDesc + '"' + '}';
                } else {
                    team += ',{"fieldName":' + '"' + fieldName + '"' + ',"fieldDesc":' + '"' + fieldDesc + '"' + '}';
                }
                if ((j + 1) == optionTeam.length) {
                    team += ']}';
                }
            }
            if ((i + 1) == $("fieldset").length) {
                team += ']';
            }
        }
        team += '}';

        $.ajax({
            url: serverPath.formPath + setter.formLinkPath + 'table/teamSave',
            type: "post",
            dataType: 'json',
            data: {"json": team, "tableId": tableId},
            success: function (result) {
                layer.alert(result.msg, {skin: 'btn-class'}, function () {
                    var index = parent.layer.getFrameIndex(window.name);
                    bulletWindow(index);
                });
            },
        });
    });

    //删除分组
    function delTeam(delLabel) {
        $(delLabel).parents("fieldset").remove();
    }

    //分组字段里面上移下移置顶置顶功能
    $(document).on('click', ".moveFieldUp", function () {
        var td = $(this).parent().parent().parent();
        var select = $("select[name='teamField']", td).get(0);
        __SelectOption__.moveUp(select, '1');
    });
    $(document).on('click', ".moveFieldDown", function () {
        var td = $(this).parent().parent().parent();
        var select = $("select[name='teamField']", td).get(0);
        __SelectOption__.moveDown(select, '1');
    });
    $(document).on('click', ".moveFieldTop", function () {
        var td = $(this).parent().parent().parent();
        var select = $("select[name='teamField']", td).get(0);
        __SelectOption__.moveTop(select);
    });
    $(document).on('click', ".moveFieldBottom", function () {
        var td = $(this).parent().parent().parent();
        var select = $("select[name='teamField']", td).get(0);
        __SelectOption__.moveBottom(select);
    });

    //移除分组字段
    function removeOption(teamField) {
        var option = $(teamField);
        var optId = option.val();
        if (optId == null || optId == "") {
            return;
        } else {
            teamField.options.remove(teamField.selectedIndex);
        }
    }

    //改变div的样式
    function changeStyle(div) {
        for (var i = 0; i < $("div[name ='divStyle']").length; i++) {
            $("div[name='divStyle']")[i].style.border = "";
        }
        div.style.border = "1px solid red";
    }

    //将表字段添加到分组
    function toTeam(field) {
        var tableField = $(field);
        var fieldDesc = tableField.text();
        var fieldName = tableField.next().val();
        for (var i = 0; i < $("div[name='divStyle']").length; i++) {
            if ($("div[name='divStyle']")[i].style.border != "" && $("div[name='divStyle']")[i].style.border != null) {
                //获取所有的分组字段
                for (var j = 0; j < $("form option").length; j++) {
                    if ($($("form option")[j]).val() == fieldName) {
                        layer.alert('该字段已经添加分组,请先移除再添加!');
                        return false;
                    }
                }
                $($("div[name='divStyle']")[i]).children("select").append('<option class="tabField" value="' + fieldName + '">' + fieldDesc + '</option>\n');

            }
        }
    }

</script>
